<style>
.list_order_outer{height: 100%;overflow: hidden;}
.list_order_outer .van-tabs{height: 100%;overflow: hidden;display: flex;flex-direction: column;}
.list_order_outer .van-tabs>*{flex-shrink: 0;flex-grow: 0;}
.list_order_outer .van-tabs .van-tabs__content{flex-shrink: 1;height: 100%;overflow: hidden;}
.list_order_outer .van-tabs .van-tabs__content>*{height: 100%;overflow-y: auto;}
</style>
<style scoped>
.header{justify-content: space-between;width: 98%;margin: auto;padding: 6px 0;opacity: 0.5;}
.pay_money{color: var(--color-primary);font-size: 1.2em;font-weight: bold;}
.pay_money>.price>.sm{font-size: 0.8em;}
.action_button{height: 26px;line-height: 26px;margin: 0 2px;}
.list_row{margin:4px 8px;border-radius: 8px;overflow: hidden;background: #fff;border-bottom: 1px solid var(--color-bg-re-1);}
.list_row:last-child{border-bottom: none;}
</style>
<template>
  <div class="list_order_outer">
    <van-tabs v-model:active="tab" class="list_order_tabs">
      <van-tab v-for="(tab_row,k) in status_tabs_map" :title="tab_row.label" :name="k">
        <RequestListSlot :ref="(el)=>{tab_row.$list=el}" :url="tab_row.url" :post_data="post_data" :list_handle="list_handle" pull_refresh >
          <template #default="{row}">
            <div inset class="list_row">
              <van-cell @click.stop="copy_order_no(row)">
                <template #title>
                  <p class="text-ellipsis"><template v-if="row.order_no">{{row.order_no}} <van-tag type="primary">复制</van-tag></template></p>
                </template>
                <template #value>
                  <p>{{row.status_label}}</p>
                </template>
              </van-cell>
              <Card v-bind="row" />
              <van-cell center v-for="param in extend_param" :title="param.label" :value="row[param.name]" />
              <van-cell>
                <template #title>
                  <div class="flex">
                    <div>实付：</div>
                    <money :value="row.pay_money"></money>
                  </div>
                </template>
                <template #value>
                  <van-button class="action_button" v-for="can_action in row.can_action_list" :text="can_action.label" :size="'small'" @click.stop="click_action(can_action, row)" />
                </template>
              </van-cell>
            </div>
          </template>
        </RequestListSlot>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {decode_config, copy_txt, decode_btns, _href} from "@/js/s94_tool.js";
import {msg} from "@/js/vant_tool.js";
import {href_handle} from "@/vue_plugin/router_auto.js";
import {ajax, pay_handle} from "@/js/api_tool.js";
import {S94Model} from "@/js/S94Model.js";
import s94Mjs from "s94-js";
import Money from "@/components/widget/Money.vue";
import Card from "@/components/card/Card.vue";
import RequestListSlot from "@/components/slot/RequestListSlot.vue";
export default {
  components:{RequestListSlot, Card, Money},
  props: {
    model: S94Model,
    this_action: Object,
    is_admin: Boolean,
  },
  data(){
    /**
     * @param {String[]} refund_pay_status_arr 属于退款的支付状态集合
     */
    return {
      list: [],
      category_list: [],
      category: "",
      column: 1,
      list_base_config: {mode:'', content:''},
      extend_param: [],

      post_data: {},

      refund_pay_status_arr: {},
      status_tabs_map: {},
      pay_success_status: '',
      tab: '',
    }
  },
  methods:{
    copy_order_no(row){
      if (!row.order_no) return;
      copy_txt(row.order_no);
      msg.ok("复制成功");
    },
    list_handle(list){
      list.forEach(row=>{
        //可执行的操作
        row.can_action_list = [];
        let ban_action = this.this_action.config.ban_action || [];
        let ban_type = ["restore","delete","add","del","export_list","recycle","list"];
        if (typeof ban_action === "string") ban_action = ban_action.split(",");
        let actionMap = this.is_admin ? this.model.canActionListAdmin(row) : this.model.canActionListHome(row);
        Object.values(actionMap).forEach((action_row)=> {
          if (~ban_action.indexOf(action_row.action)) return;
          if (~ban_type.indexOf(action_row.type)) return;
          row.can_action_list.push(action_row);
        })

        // row.btn_list = this.action_row(row);
        //状态别称
        let keys = ['pay_status','status'];
        if (s94Mjs.to_string(row.pay_status) === this.pay_success_status) keys.reverse();
        keys.some((key)=>{
          row.status_label = this.model.status_alias_map[key][row[key]];
          return !!row.status_label;
        })
      })
      return list;
    },
    reset_list(is_all){
      let keys = is_all ? Object.keys(this.status_tabs_map) : [this.tab];
      keys.forEach(k=>{
        let tab_row = this.status_tabs_map[k];
        if (tab_row.$list) tab_row.$list.refresh();
      })
    },
    click_row(row){
      let info_action = this.model.first_action('info', this.is_admin);
      let href = info_action ? `/${this.is_admin?'admin/model_base':'model_base'}/info?model_name=${this.model.name}&action=${info_action.action}&id=${row.id}` : '';
      switch (this.model.name) {
        case 'link':{href = row.href;}break
      }
      if(href) href_handle(href);
    },
    click_action(action_row, data){
      let url = `/${this.is_admin?'admin':'home'}/${this.model.name}/${action_row.action}?id=${data.id}`;
      if(action_row.type === "export_info") {
        window.open(_href(url), '_blank');
      }else if (action_row.form_param_ids || action_row.type === "refund_apply"){
        let param = {id:data.id, model_name:this.model.name, action:action_row.action};
        if (action_row.type === "info") param['is_info'] = 1;
        let path = `/${this.is_admin?'admin/model_base':'model_base'}/edit?`+s94Mjs.param_encode(param);
        href_handle(path);
      }else if(action_row.type === "pay"){
        pay_handle(url, {}, ()=>{this.reset_list(true);});
      }else {
        msg.confirm(`是否执行 【${action_row.label}】 操作`).then(()=>{
          ajax(url, function(res){
            this.reset_list(true);
          })
        }).catch(()=>{})
      }
    },
    init(){
      let action_config = this.this_action.config;
      // 列表列数
      let column = parseInt(action_config.column || '1');
      if (column<1 || column>5) column = 1;
      this.column = column;
      //列表的content
      this.list_base_config.content = 'price_num';
      //列表的mode
      this.list_base_config.mode = s94Mjs.map(action_config, 'mode', 'round_row');

      this.status_tab_init();
      this.query_form_init();
      this.reset_list(true);
    },
    status_tab_init(){
      let url_base = `/${this.is_admin?'admin':'home'}/${this.model.name}/${this.this_action.action}`;
      function tab_row(label, where){
        let url = url_base;
        if (where){
          let param = s94Mjs.param_encode({where})
          url += '?'+param;
        }
        return {
          label: label,
          url: url,
          $list: false,
        }
      }
      let status_tabs_map = {
        _all: tab_row('全部'),
        _need_pay: tab_row('待支付',{pay_status:{'eq':0}}),
      };
      let need_pay_status = '';
      let pay_success_status = '';
      let cancel_pay_status = '';
      Object.keys(this.model.action_map).forEach(k=>{
        let action_row = this.model.action_map[k];
        if (need_pay_status==='' && action_row.type==='pay' && action_row.need_pay_status!=='') need_pay_status = action_row.need_pay_status;
        if (pay_success_status==='' && action_row.type==='pay_success' && action_row.change_pay_status!=='') pay_success_status = action_row.change_pay_status;
        if (cancel_pay_status==='' && action_row.type==='cancel_pay' && action_row.change_pay_status!=='') cancel_pay_status = action_row.change_pay_status;
      })
      let status_map = s94Mjs.map(this.model.status_alias_map, 'status', {});
      let pay_status_map = s94Mjs.map(this.model.status_alias_map, 'pay_status', {});
      if (need_pay_status && pay_status_map[need_pay_status]) {
        status_tabs_map['_need_pay'] = tab_row(pay_status_map[need_pay_status],{pay_status:{'eq':need_pay_status}});
      }
      let refund_pay_status_arr = []; // 属于退款的支付状态集合
      Object.keys(pay_status_map).forEach(k=>{
        if (k!==need_pay_status && k!==pay_success_status && k!==cancel_pay_status){
          refund_pay_status_arr.push(k);
        }
      })
      let status_where = {};
      if (refund_pay_status_arr.length>0) {
        status_where.pay_status = {'notin':refund_pay_status_arr.join(',')};
      }
      Object.keys(status_map).forEach(k=>{
        status_where.status = {'eq':k};
        status_tabs_map['status_'+k] = tab_row(status_map[k],Object.assign({},status_where));
      })
      if (refund_pay_status_arr.length>0) {
        status_tabs_map._refund = tab_row('退款',{pay_status:{'in':refund_pay_status_arr.join(',')}});
      }

      this.pay_success_status = pay_success_status;
      this.status_tabs_map = status_tabs_map;
      this.refund_pay_status_arr = refund_pay_status_arr;
      setTimeout(()=>{this.tab = '_all';}, 20);
    },
    query_form_init(){
      if (!this.is_admin) return;
      let cache_name = `query_form_data,${this.model.name},${this.this_action.action}`;
      this.where = s94Mjs.cache(cache_name, {});
      let app = this;
      let url = `/${this.is_admin?'admin':'home'}/${this.model.name}/${this.this_action.action}?_is_init_=1`;
      let form_map = {
        '排序':{title:'排序', config:[]},
        '筛选':{title:'筛选', config:[]},
      }
      ajax(url, (res)=>{
        let init_data = {}
        // 列表字段
        let ban_name = ['order_no','title','head_img','price','num','pay_money','status','pay_status'];
        let show_type = ['text_one','text_more'];
        this.extend_param = [];
        Object.values(res.data).forEach(row=>{
          if (~ban_name.indexOf(row.name) || !~show_type.indexOf(row.type)) return;
          this.extend_param.push(row);
        })
        // 排序
        let order_config = decode_config('无|,正序|asc,倒序|desc');
        Object.values(res.data).forEach(row=>{
          if (row.can_order==1) form_map['排序'].config.push({
            name: `order[${row.name}]`,
            label: row.label,
            value: '',
            type: 'radio',
            config: order_config,
          });
        })
        // 筛选条件
        Object.values(res.where).forEach(row=>{
          let group_name = row.group_name || '筛选';
          if (!form_map[group_name]) {
            form_map[group_name] = {title:group_name, config:[]};
          }
          init_data[row.name] = row.value;
          if (app.where[row.name]) row.value = app.where[row.name];
          form_map[group_name].config.push(row);
        })
        // 移除空的表单
        let form_list = [];
        Object.values(form_map).forEach(list_row=>{
          if (list_row.config.length) form_list.push(list_row);
        })
        // gc_show.popup_form_arr({config_list: form_list}, (_this,ac)=>{
        //   app.post_data = Object.assign(app.post_data, _this.form_data);
        //   // 缓存筛选条件
        //   s94Mjs.cache({[cache_name]: _this.form_data});
        //   app.reset_list(true);
        // });
      })
    },
  },
  watch:{
  },
  computed:{
    now_category_id(){
      let key = this.category+'_id.eq';
      let category_id = s94Mjs.map(this.where, key);
      return s94Mjs.to_string(category_id);
    }
  },
  mounted(){
    this.init();
  }
}
</script>